<template>
	<list-layout class="system-role-list-wrap margin25">
		<Button slot="top-right" type="primary" @click="showCreate" style="margin-bottom: 5px">添加角色</Button>

		<Table slot="table" :columns="columns" :data="page.data" border stripe>
			<template slot="action" slot-scope="{row}">
				<Button type="primary" size="small" ghost @click="showEdit(row.id)">编辑</Button>
				<Button type="error" size="small" ghost @click="deleteHandler([{id: row.id}])">删除</Button>
			</template>
		</Table>
		<Page slot="page"
		      :total="page.total"
		      :current="page.pageNum"
		      :page-size="page.pageSize"
		      @on-change="onPageNumChange"
		      @on-page-size-change="onPageSizeChange"
		/>

		<edit :ref="createDialogRef"/>
	</list-layout>
</template>

<script>
import JBoot from 'jboot-env';

const columns = Object.freeze([
	{title: '角色名称', key: 'name'},
	{title: '角色编码', key: 'code'},
	{title: '备注信息', key: 'remark', ellipsis: true, tooltip: true},
	{title: '创建时间', key: 'createTime'},
	{title: '操作', slot: 'action', width: 140}
]);

export default JBoot.page({
	components: {
		edit: require('./edit').default
	},

	data (){
		return {
			moduleName: 'role',
			columns
		}
	},

	methods: {
	}
});
</script>

<style lang="scss">
.system-role-list-wrap {
}
</style>
